<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      const data = [
        { date: "2010", avg: 545 ,max:705,min:402},
        { date: "2011", avg: 512 ,max:593,min:463},
        { date: "2012", avg: 493 ,max:685,min:455},
        { date: "2013", avg: 566 ,max:703,min:421},
        { date: "2014", avg: 589 ,max:712,min:443},
        { date: "2015", avg: 601 ,max:724,min:452},
        { date: "2016", avg: 575 ,max:701,min:498},
        { date: "2017", avg: 523 ,max:598,min:473},
        { date: "2018", avg: 476 ,max:685,min:448},
        { date: "2019", avg: 503 ,max:708,min:452},
        { date: "2020", avg: 625 ,max:721,min:456},
        { date: "2021", avg: 584 ,max:610,min:424},
        { date: "2022", avg: 539 ,max:704,min:488},
        { date: "2023", avg: 561 ,max:709,min:415},
      ];


      const width = 800 ;
      const height = 600 ;
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      

      const angleScale = d3.scaleTime()
        .domain(d3.extent(data,d=>new Date(d.date)))
        .range([0 , Math.PI * 2 ])  

      const radiusScale = d3.scaleLinear()
        .domain([d3.min(data,d=>d.min) , d3.max(data,d=>d.max)])  
        .range([150,200])
           
      const ar = d3.areaRadial()
        .angle(d=>angleScale(new Date(d.date)))  
        .innerRadius(d=>radiusScale(d.min))
        .outerRadius(d=>radiusScale(d.max))

      const d = ar(data);

      const g = svg.append('g').attr('transform',`translate(${width/2},${height/2})`);
      g.append('path')
        .attr('d',d)
        .attr('fill','#eee')
        .attr('stroke','#eee')


    </script>
  </body>
</html>
